<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    @cancel="close"
    @ok="close"
    :width="1200"
    title="查看详情">
    <a-spin :spinning="spinning">
      <a-row type="flex" :gutter="16">
        <a-col :span="11">
          <a-descriptions title="原房屋" bordered :column="2">
            <a-descriptions-item label="居住人"> {{ oldHouse.Name || '/' }} </a-descriptions-item>
            <a-descriptions-item label="状态"> {{ oldHouse.Mode }} </a-descriptions-item>
            <a-descriptions-item label="门牌号"> {{ oldHouse.Floor }}-{{ oldHouse.Number }} </a-descriptions-item>
            <a-descriptions-item label="面积（㎡）"> {{ oldHouse.Area }}㎡ </a-descriptions-item>
            <a-descriptions-item label="房屋结构"> {{ oldHouse.fwjg }} </a-descriptions-item>
            <a-descriptions-item label="地址"> {{ oldHouse.ESitesSelect }}{{ oldHouse.dong }}栋{{ oldHouse.unit }}单元{{ oldHouse.Floor }}-{{ oldHouse.Number }} </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="2" class="a-flex a-row-cneter a-row-center text-primary"><a-icon type="right" /><a-icon type="right" /></a-col>
        <a-col :span="11">
          <a-descriptions title="新房屋" bordered :column="2">
            <a-descriptions-item label="居住人"> {{ newHouse.Name || '/' }} </a-descriptions-item>
            <a-descriptions-item label="状态"> {{ newHouse.Mode }} </a-descriptions-item>
            <a-descriptions-item label="门牌号"> {{ newHouse.Floor }}-{{ newHouse.Number }} </a-descriptions-item>
            <a-descriptions-item label="面积（㎡）"> {{ newHouse.Area }}㎡ </a-descriptions-item>
            <a-descriptions-item label="房屋结构"> {{ newHouse.fwjg }} </a-descriptions-item>
            <a-descriptions-item label="地址"> {{ newHouse.ESitesSelect }}{{ newHouse.dong }}栋{{ newHouse.unit }}单元{{ newHouse.Floor }}-{{ newHouse.Number }} </a-descriptions-item>
          </a-descriptions>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import { getHouseFloorDetail } from '@/api/DistrictReviewReportManagement'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      spinning: false,
      oldHouse: {},
      newHouse: {}
    }
  },
  methods: {
    fetchData () {
      this.spinning = true
      const getOldHouse = getHouseFloorDetail({
        id: this.data.HF_FWID
      })
      const getNewHouse = getHouseFloorDetail({
        id: this.data.ESites
      })
      Promise.all([getOldHouse, getNewHouse])
        .then((res) => {
          this.oldHouse = res[0]
          this.newHouse = res[1]
        })
        .finally(() => {
          this.spinning = false
        })
    },
    close () {
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    hanldeAfterClose () {}
  }
}
</script>
<style lang="less" scoped>
</style>
